<template>
  <div class="page_downstreamUsers">
    <van-nav-bar
      :title="pageTitleObj[$route.query.keywordId]"
      left-arrow
      @click-left="$router.push('/recommend_persons')"
    />

    <DSUsers :itemObj="userItemInfo"  :keyWord="'showDSUsers'" />

    <van-divider :style="{color:'#020202', borderColor: '#DD4F42', padding: '10px 66px', margin: '0'}">
      他推广的用户
    </van-divider>

    <van-dropdown-menu>
      <van-dropdown-item v-model="params.role" :options="rightOption" />
    </van-dropdown-menu>

    <div class="DSUsers_list" v-if="DSUsers.length">
      <DSUsers
        v-for="(item, index) in DSUsers"
        :key="item.id"
        :itemObj="item"
        :keyWord="$route.query.keywordId || ''"
      />

      <van-pagination
        style="margin-top: 10px;"
        v-model="params.pageIndex"
        :total-items="total"
        :items-per-page="params.pageSize"
        force-ellipses
        @change="handleChangePage"
      />
    </div>
    <van-divider style="margin-top: 88px" v-else>暂无数据</van-divider>


    <van-action-sheet
      v-model="isShowAction"
      :actions="actionsArr_L2"
      cancel-text="取消"
      close-on-click-action
      @select="handleSelectAction"
    />

  </div>
</template>

<script>
import DSUsers from "./components/DSUsers";
import logoImg from '@/assets/logo.png';


// 从【他推广的用户】进入
const rightOptionObj_RP = {
  '-1': '二级全部用户',
  '0': '二级个人用户',
  '1': '二级企业用户'
};
const rightOption_RP = [
  {text: '二级全部用户', value: '-1'},
  {text: '二级个人用户', value: '0'},
  {text: '二级企业用户', value: '1'}
];


// 从【我获得二级股份】进入
const rightOptionObj_L2 = {
  '-1': '二级全部用户',
  '0': '二级个人用户',
  '1': '二级企业用户',

  /*level_one_no_person: '一级未推广个人用户',
  level_one_person: '一级已推广个人用户',
  level_one_no_enterprise: '一级未推广企业用户',
  level_one_enterprise: '一级已推广企业用户',
  level_one_no_getStock: '一级未领取股份',
  level_one_getStock: '一级已领取股份',*/
  level_two_no_getStock: '二级未领取股份',
  level_two_getStock: '二级已领取股份',
};
const rightOption_L2 = [
  {value: '-1',text: '二级全部用户',},
  {value: '0', text: '二级个人用户', },
  {value: '1', text: '二级企业用户',},
  /*{value: 'level_one_no_person',text: '一级未推广个人用户',},
  {value: 'level_one_person',text: '一级已推广个人用户',},
  {value: 'level_one_no_enterprise',text: '一级未推广企业用户',},
  {value: 'level_one_enterprise',text: '一级已推广企业用户',},
  {value: 'level_one_no_getStock',text: '一级未领取股份',},
  {value: 'level_one_getStock',text: '一级已领取股份',},*/
  {value: 'level_two_no_getStock',text: '二级未领取股份',},
  {value: 'level_two_getStock',text: '二级已领取股份',},
];


// 从【二级推广用户发布招聘信息的总数】进入
const rightOptionObj_L2Job = {
  '1': '全部（不限）',
  level_two_no_job: '二级用户未发布招聘信息',
  level_two_job: '二级用户已发布招聘信息',
};
const rightOption_L2Job = [
  {value: '1',text: '全部（不限）',},
  {value: 'level_two_no_job', text: '二级用户未发布招聘信息',},
  {value: 'level_two_job', text: '二级用户已发布招聘信息',},
];




export default {
  name: "downstreamUsers",
  components: {
    DSUsers,
  },
  data(){
    return {

      pageTitleObj: {
        'RP': '他推广的用户',
        'L2': '我获得的二级股份',
        'L2Job': '二级用户发布的招聘信息',
      },

      rightOption: [],

      logoImg,
      userItemInfo: {},
      DSUsers: [],
      total: 0,
      params: {
        // 一般为-1
        role: '-1',
        pageSize: 10,
        pageIndex: 1,
      },

      isShowAction: false,

      actionsArr_L2: [
        { name: '已领取的二级股份', color: '#3592C4', },
        { name: '待领取的二级股份', color: '#EF7674', },
      ],

      // 从哪个按钮跳转至该页面
      pageKeywordId: '',
    }
  },


  created() {
    if (this.$route.query.id) {
      this.userItemInfo = this.$route.query;
      this.pageKeywordId = this.$route.query.keywordId
    } else {
      this.$router.back()
    }
  },


  mounted() {
    this._updateFilterActions(this.pageKeywordId);
    this._initPageData(this.params);
  },

  methods: {
    _updateFilterActions(keyId){
      console.warn('更新筛选条。。。。');
      if (keyId === 'L2Job'){
        // 此页面只需要企业用户
        this.params.role = '1';
      };

      // 修改筛选的状态
      const nameStr1 = `rightOption_${keyId}`;
      // const nameStr2 = `rightOptionObj_${keyId}`;

      this.rightOption = eval(nameStr1);
    },

    _initPageData(params){
      const paramPro = {
        ...params,
        upId: this.userItemInfo.id,
      };

      this.$api.others.reqMyDSPersons(paramPro).then(res => {
        if (res.code === 200) {
          this.DSUsers = res.data.items
          this.total = res.data.count
        }
      });

    },

    handleChangePage(val){
      Object.assign(this.params, {
        pageIndex: val,
      });
      this._initPageData(this.params);
    },


    handleSelectAction(action, index){
      console.log(action, index);
      // 一级
      const pathName = index === 0 ? 'receivedStock' : 'unReceivedStock';
      this.$router.push({
        name: pathName,
        query: { num: 666, }
      });
    },



  },

}
</script>

<style lang="scss" scoped>
.page_downstreamUsers{
  width: 100%;
  box-sizing: border-box;
  .DSUsers_list{
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 15px;
  }

}
</style>
